import { FC, useEffect, useState } from 'react';

import classnames from 'classnames';
import Image from '@/components/Image';
import Content from './components/Content';
import SimpleList from '@/components/SimpleList';

import styles from './style.less';

import navArr from './nav_config';
import { navItem } from '@/interface/cyl';
const Home: FC = () => {
  useEffect(() => {
    document.title = '产业链分析';
  }, []);
  const [partNum, setPartNum] = useState<number>(0);
  return (
    <div className={styles.container}>
      <div className={styles.nav_warp}>
        {navArr.map((item: navItem, index: number) => (
          <div
            className={classnames(
              styles.nav_item,
              index === partNum ? styles.actived : null,
            )}
            key={index}
            onClick={() => setPartNum(index)}
          >
            <Image
              src={index === partNum ? item.selectedIcon : item.icon}
            ></Image>
            <span>{item.title}</span>
          </div>
        ))}
      </div>
      <div className={styles.content_warp}>
        {partNum === 0 && <Content type="car" />}
        {partNum === 1 && <Content type="robot" />}
        {partNum === 2 && <Content type="dna" />}
        {partNum === 3 && <Content type="technology" />}
        {partNum === 4 && <Content type="military" />}
        {partNum === 5 && <Content type="fuse" />}
        {partNum === 6 && <Content type="money" />}
      </div>
    </div>
  );
};

export default Home;
